<template>
  <div class="three-canvas" ref="threeTarget"></div>
</template>

<script>
// import { ThreeEngine } from "./js/TEngine.js";
import { ThreeEngine } from "./ts/TEngine.ts";
import { allBaseObject ,objLoader } from './ts/TBaseObject'
// import { allLights } from './js/TLights'
import { allLights } from './ts/TLights'
import { allHelper } from './js/THelper'
import { inject } from "vue";
import { Mesh, MeshStandardMaterial } from "three";
import { STLLoader } from "three/examples/jsm/loaders/STLLoader.js";
import Stats from 'three/examples/jsm/libs/stats.module.js'

export default {
  name: 'HelloWorld',
  data() {
    return {
      ThreeEngine: null,
    };
  },
  setup() {
    return {};
  },
  mounted() {
    let stats = new Stats()
    // 设置监视器面板，传入面板id（0: fps, 1: ms, 2: mb）
    stats.setMode(0)
    // 设置监视器位置
    stats.domElement.style.position = 'absolute'
    stats.domElement.style.left = '0px'
    stats.domElement.style.top = '0px'
    // 将监视器添加到页面中
    document.body.appendChild(stats.domElement)
    
    this.ThreeEngine = new ThreeEngine(this.$refs.threeTarget, { stats:stats })
    this.ThreeEngine.addObject(...allLights)  // 添加光线
    //this.ThreeEngine.addObject(...allHelper)   // 添加辅助
    // this.objLoader = objLoader.getInstance(this.ThreeEngine);
    // this.objLoader = new objLoader(this.ThreeEngine);
    // this.objLoader.load("/assets/model/test.STL", 0);
    this.ThreeEngine.loadModel("/assets/model/test.STL", 0);
  }
}
</script>

<style scoped>
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}

.three-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #d6eaff;
}
</style>./ts/TEngineForTs.js./ts/TEngine.js./ts/TLights.js